<template>
  <div class="create-course-container">
    <h2 class="mb-6 text-2xl font-bold">
      创建新课程
    </h2>

    <!-- 表单 -->
    <form
      class="space-y-4 max-w-2xl mx-auto"
      @submit.prevent="submitForm"
    >
      <!-- 课程名称 -->
      <div class="form-group">
        <label
          for="courseName"
          class="block text-sm font-medium text-gray-700 mb-1"
        >课程名称</label>
        <input
          id="courseName"
          v-model="formData.courseName"
          type="text"
          required
          placeholder="请输入课程名称"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
      </div>

      <!-- 课程ID -->
      <div class="form-group">
        <label
          for="courseId"
          class="block text-sm font-medium text-gray-700 mb-1"
        >课程编号</label>
        <input
          id="courseId"
          v-model="formData.courseId"
          type="text"
          required
          placeholder="请输入课程编号"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
      </div>

      <!-- 课程大纲 -->
      <div class="form-group">
        <label
          for="course"
          class="block text-sm font-medium text-gray-700 mb-1"
        >课程大纲</label>
        <textarea
          id="course"
          v-model="formData.course"
          rows="4"
          required
          placeholder="请输入课程大纲"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <!-- 教学目标 -->
      <div class="form-group">
        <label
          for="teachingGoal"
          class="block text-sm font-medium text-gray-700 mb-1"
        >教学目标</label>
        <textarea
          id="teachingGoal"
          v-model="formData.teachingGoal"
          rows="3"
          required
          placeholder="请输入教学目标"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <!-- 考核方式 -->
      <div class="form-group">
        <label
          for="examinationMethod"
          class="block text-sm font-medium text-gray-700 mb-1"
        >考核方式</label>
        <textarea
          id="examinationMethod"
          v-model="formData.examinationMethod"
          rows="3"
          required
          placeholder="请输入考核方式"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      <!-- 提交按钮 -->
      <div class="flex justify-center mt-6">
        <!-- 返回按钮 -->
        <button
          type="button"
          class="btn btn-secondary"
          @click="goBack"
        >
          <i class="fa fa-chevron-left me-1" /> 返回
        </button>
        <button
          type="submit"
          class="btn btn-primary"
        >
          提交创建
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/userStore';

const router = useRouter();

const userStore = useUserStore();
const userId = userStore.user?.userId||'';

console.log('userId', userId)


// 表单数据模型
const formData = ref({
  courseId: '',
  courseName: '',
  course: '',
  teachingGoal: '',
  examinationMethod: ''
});

// 提交表单
const submitForm = async () => {
  try {
    const response = await axios.post('/api/courses', {
        ...formData.value,
        userId:userId});
    const newCourse = response.data.data;

    // 成功后跳转到课程详情页
    router.push(`/course/${newCourse.courseId}`);
  } catch (error) {
    console.error('创建课程失败:', error);
    alert('创建课程失败，请重试');
  }
};

function goBack() {
  router.push('/mainPage');
}

</script>

<style scoped>
.create-course-container {
  padding: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.btn {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.375rem;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #2563eb;
}
</style>